<template>
    <h1>计算属性的set和get方法</h1>
    姓:<input type="text" v-model="state.firstName"><br>
    名:<input type="text" v-model="state.lastName"><br>
    姓名:<input type="text" v-model="state.fullName"><br>
    输出结果:{{state.fullName}}
</template>

<script>
import {reactive,computed} from 'vue'
export default {
    setup(){
        const state=reactive({
            firstName:'zhai',
            lastName:'jizhe'
        })
        // state.fullName=computed(()=>{
        //     return state.firstName+" "+state.lastName
        // })

        state.fullName=computed({
            set(newval){
                state.firstName=newval.split(" ")[0]
                state.lastName=newval.split(" ")[1]
            },
            get(){
                return state.firstName+" "+state.lastName
            }
        })
        return {
            state
        }
    }
}
</script>

<style>

</style>